<template>
  <div class="input">
    <div class="in1" v-show="showData">
      <button class="bx">
        +86
        <i class="el-icon-arrow-down"></i>
      </button>
      <input
        class="in4"
        type="text"
        placeholder="请输入手机号"
        v-model="userPhone"
      />
    </div>
    <hr class="hr1" v-show="showData" />

    <div class="in2" v-show="showData1">
      <input
        class="in4A"
        type="text"
        placeholder="用户名/邮箱/手机号"
        v-model="userPhone"
      />
    </div>
    <hr class="hr" v-show="showData1" />

    <div class="in2" v-show="showData">
      <input
        class="in3"
        type="text"
        placeholder="请输入收到的验证码"
        v-model="goNum"
      />
      |<button class="b1" @click="sendCode">获取验证码</button>
    </div>
    <hr v-show="showData" />

    <div class="in2" v-show="showData1">
      <input
        class="in3A"
        type="password"
        placeholder="请输入密码"
        v-model="goNum"
        @click="sendCode1"
      />
      |<button class="b1">忘记密码</button>
    </div>
    <hr class="hr" v-show="showData1" />

    <div>
      <!-- <router-link :to="{path: '/home/Login2', query:{goNext}}">router-link传值</router-link> -->
      <el-row>
        <el-button type="success" class="login" @click="go2">登录</el-button>
      </el-row>
    </div>
    <div class="go1">
      <div>
        <ol @click="show" v-show="showData">
          账号密码登录
        </ol>
        <ol @click="show" v-show="showData1">
          短信验证码登录
        </ol>
      </div>
      <div>
        <ol @click="go3">
          手机快速注册
        </ol>
      </div>
    </div>
    <div class="box">
      <span class="line"></span>
      <span class="text">其他登录方式</span>
      <span class="line"></span>
    </div>
    <div class="img">
      <img src="@/assets/wx.png" class="img1" @click="goWX"/>
      <img src="@/assets/qq.png" class="img2" @click="goQQ"/>
    </div>
    <div class="p">
      <p v-show="showData">
        未注册的手机号验证后将自动创建京东账号,登录即代表您已同意<a
          href="https://ihelp.jd.com/n/help/tip/getTipsFacade.json?tipId=74"
          onClick="return confirm('确定跳转到京东交易条款?');"
          >京东隐私政策</a
        >
      </p>
      <p v-show="showData1">
        登录即代表您已同意<a
          href="https://ihelp.jd.com/n/help/tip/getTipsFacade.json?tipId=74"
          onClick="return confirm('确定跳转到京东交易条款?');"
          >京东隐私政策</a
        >
      </p>
    </div>
  </div>
</template>
<script>
import Login2 from '../components/Login2.vue'
import Login3 from '../components/Login3.vue'
export default {
  name: "Login",
  component:{
    Login2,Login3
  },
  data() {
    return {
      userPhone: "",
      goNum: null,
      goNext: "",
      showData: true,
      showData1: false,
      showData2: false,
    };
  },
  methods: {
    sendCode() {
      if (this.userPhone == "") {
        alert("手机号不能为空");
        return false;
      }
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
      // 非全局不会重复,g全局,js正则表达式
      if (!reg.test(this.userPhone)) {
        alert("请输入正确的手机号");
        return false;
      } else {
        alert("验证码:12345");
      }
    },
    sendCode1() {
      if (this.userPhone == "") {
        alert("用户名/邮箱/手机号不能为空");
        return false;
      }
    },
    go2() {
      if (this.goNum == 12345) {
        console.log(this.goNum);
        // window.location.href = "http://localhost:8080/#/Login2";
      this.$router.push("/Login2")

      } 
    },
    go3() {
      this.$router.push("/Login3")
      // window.location.href = "http://localhost:8080/#/Login3";
    },
    show() {
      this.showData = !this.showData;
      this.showData1 = !this.showData1;
    },
    goWX(){
      window.location.href = "https://weixin.qq.com/";
    },
    goQQ(){
      window.location.href = "https://im.qq.com/";

    }
  },
};
</script>
<style scoped>
.input {
  display: block;
}
input:focus {
  outline: medium;
}
.inA {
  text-align: left;
  width: 300px;
}
.in2 {
  margin: 15px;
}
.in3 {
  width: 200px;
  border-style: none;
}
.in3A {
  width: 200px;
  border-style: none;
  text-align: left;
}
.in4 {
  margin: 10px;
  width: 240px;
  border-style: none;
}
.in4A {
  margin: 0px;
  width: 280px;
  border-style: none;
}
.b1 {
  border-style: none;
  background-color: white;
  color: rgba(172, 136, 136, 0.884);
}
.bx{
  border: none;
  background-color: white;
}
hr {
  border: 1px solid rgb(226, 226, 217);
  margin: 5px auto;
  width: 320px;
}
.login {
  line-height: 30px;
  width: 330px;
  height: 50px;
  margin: 10px auto;
  border-radius: 25px;
  background: rgb(252, 183, 178);
  text-align: center;
  font-size: 15px;
  color: white;
}
.login:hover {
  background-color: rgb(77, 211, 166);
}
.go1 {
  display: flex;
  font-size: 14px;
  justify-content: space-around;
  margin-left: -35px;
  color: rgba(172, 136, 136, 0.884);
}
.box {
  margin: 80px;
  display: flex;
  align-items: center;
}
.line {
  border-top: 1px solid rgba(187, 158, 158, 0.884);
  flex-grow: 1;
}
.text {
  font-size: 12px;
  margin: 0 10px;
  color: rgba(187, 158, 158, 0.884);
}

.img1 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.img1:hover {
  background-color: thistle;
}
.img2 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.img2:hover {
  background-color: thistle;
}
.p {
  color: rgba(187, 158, 158, 0.884);
  font-size: 12px;
}
</style>